<style scoped>
    .site-daily-hot {
        width: 100vw;
        background-color: #f8fafc;
    }

    .hot-container {
        width: 100vw;
        height: 100%;
        padding: 30px 0;
        display: grid;
        grid-auto-flow: row dense;
        grid-template-rows: auto;
        grid-template-columns: repeat(4, 25%);
    }

    .hot-title-img {
        height: 150px;
    }

    .hot-card {
        width: 270px;
        height: auto;
        margin: 16px;
        text-align: center;
    }

    .hot-img {
        height: 170px;
    }

    a {
        text-decoration: none;
        color: #657180;
    }

    .ivu-divider-horizontal {
        margin: 10px;
    }

    .pricetag {
        color: #ff5e57;
        margin: 4px;
    }

    @media screen and (max-width: 1199px) {
        .hot-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }
    }

    @media all and (max-width: 980px) {
        .hot-card {
            width: auto;
        }

        .hot-card img {
            max-width: 200px;
            height: 130px;
        }
    }

    @media screen and (max-width: 780px) {
        .hot-card {
            width: 150px;
        }
        .hot-card img {
            width: 100px;
            height: 110px;
        }
    }

    @media screen and (max-width: 500px) {
        .hot-card {
            width: 140px;
            margin: 10px;
        }
        .hot-card img {
            width: 100px;
            height: 100px;
        }
    }
</style>
<template>
    <div class="site-daily-hot">
        <div class="hot-container">
            <Card class="hot-card">
                <img src="static/img/decorate/dailyHot.png" alt="hot" class="hot-title-img">
                <Divider style="margin: 20px;"></Divider>
                <h4 class="hot-title">与美好的生活不期而遇</h4>
            </Card>
            <Card class="hot-card">
                <a href="https://www.mi.com/aispeaker-hd/?cfrom=search" target="_blank">
                    <img src="static/img/hot/hot-1.png" alt="hot" class="hot-img">
                    <Divider></Divider>
                    <h4>小米小爱音箱 HD</h4>
                    <h3 class="pricetag">￥599</h3>
                </a>
            </Card>
            <Card class="hot-card">
                <a href="https://item.mi.com/1181800008.html" target="_blank">
                    <img src="static/img/hot/hot-2.png" alt="hot" class="hot-img">
                    <Divider></Divider>
                    <h4>米家 LED 吸顶灯</h4>
                    <h3 class="pricetag">￥399</h3>
                </a>
            </Card>
            <Card class="hot-card">
                <a href="https://www.mi.com/mjsmartlamp/?cfrom=search" target="_blank">
                    <img src="static/img/hot/hot-3.jpg" alt="hot" class="hot-img">
                    <Divider></Divider>
                    <h4>米家 LED 智能台灯</h4>
                    <h3 class="pricetag">￥169</h3>
                </a>
            </Card>
        </div>
    </div>
</template>
<script>
    export default {};
</script>
